<template>
  <div>
    <!--连接-->
    <el-row>
      <el-col :span="16">
        <div class="link_1">
          <el-link type="primary" href="#/" :underline="false" class="l_link">贾豆</el-link>
          <el-link type="warning" href="#/reading" :underline="false" class="l_link">读书</el-link>
          <el-link type="success" href="#/music" :underline="false" class="l_link">音乐</el-link>
          <el-link type="danger" href="#/movie" :underline="false" class="l_link">电影</el-link>
          <el-link type="primary" href="#/beanindex" :underline="false" class="l_link">豆品</el-link>
          <el-link type="warning" :underline="false" class="l_link">同城</el-link>
          <el-link type="success" :underline="false" class="l_link">小组</el-link>
          <el-link type="danger" :underline="false" class="l_link">阅读</el-link>
          <el-link type="info" href="#/" :underline="false" class="l_link">关于我们</el-link>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="link_1">
          <el-link type="primary" href="#/" :underline="false" class="l_link" style="margin-left: 80px">下载客户端
          </el-link>
          <el-link type="primary" href="#/read" :underline="false" class="l_link">登录/注册</el-link>
        </div>
      </el-col>
    </el-row>
    <!--搜索-->
    <el-row>
      <el-col :span="24">
        <div class="header_1">
          <el-row>
            <el-col :span="24">
              <div class="header_2">
                <el-row>
                  <el-col :span="4" :offset="2">
                    <div class="header_2">
                      贾豆电影
                    </div>
                  </el-col>
                  <el-col :span="10" :offset="1">
                    <div class="search">
                      <el-input type="text" placeholder="请输入要搜索的内容" v-model="input" style="width: 70%;float: left"/>
                      <el-button icon="el-icon-search" style="float: left;margin-top: 26px;margin-left: 30px" circle>
                      </el-button>
                    </div>
                  </el-col>
                </el-row>
                <!--电影连接-->
                <el-row>
                  <el-col :span="22" :offset="2">
                    <div class="movie_link">
                      <el-link href="#/" :underline="false" class="m_link">影讯&购票</el-link>
                      <el-link href="#/" :underline="false" class="m_link">选电影</el-link>
                      <el-link href="#/" :underline="false" class="m_link">电视剧</el-link>
                      <el-link :underline="false" class="m_link">排行榜</el-link>
                      <el-link :underline="false" class="m_link">分类</el-link>
                      <el-link :underline="false" class="m_link">影评</el-link>
                      <el-link :underline="false" class="m_link">2019年度榜单</el-link>
                      <el-link :underline="false" class="m_link">2019书影音报告</el-link>
                    </div>
                  </el-col>
                </el-row>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-col>
    </el-row>
    <!--main-->
    <el-row>
      <el-col :span="22" :offset="2">
        <div class="search_result">
          搜索 {{input}}
        </div>
      </el-col>
    </el-row>
    <el-row v-for="movieField in movieFields">
      <el-col :span="24">
        <div class="product_box">
          <el-col :span="5" :offset="2">
            <div style="margin-left: 10px">

              <el-link href="javascript:void(0)" :underline="false" style="color: #37a">
                <el-image style="height:260px;width: 200px" :src="movieField.mpic"
                          v-on:click="goProduct(movieField.mid)"/>
              </el-link>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="product_content">
              <div class="content">
                导演：<a href="#/">{{movieField.mdirector}}</a>
              </div>
              <div class="content">编剧：<a href="#/">{{movieField.mdirector}}</a></div>
              <div class="content">主演：<a href="#/">{{movieField.mactor}}</a></div>
              <div class="content">类型：<span>{{movieField.mtype}}</span></div>
              <div class="content">制片地区/国家：<span>{{movieField.mcountry}}</span></div>
              <div class="content">语言：<span>{{movieField.mlanguage}}</span></div>
              <div class="content">上映日期：<span>{{movieField.mdate}}</span></div>
              <div class="content">片长：<span>{{movieField.mtime}}</span></div>
              <div class="content">又名：<span>{{movieField.malias}}</span></div>
            </div>
          </el-col>
          <!--<el-col :span="11">
            <div class="content_box">
              <div class="content_title">{{movieField.mname}}的剧情简介 . . . . . .</div>
              <div class="content_content">
                {{movieField.mintro}}
              </div>
            </div>
          </el-col>-->
        </div>
      </el-col>
    </el-row>

    <!--<el-row v-show="flag">
      <el-col>
        <div>
          <h1>请搜索您想浏览的内容...</h1>
        </div>
      </el-col>
    </el-row>-->
    <!--footer-->
    <el-row>
      <el-col :span="24">
        <div class="footer">
          © 2020－2020 jiadou.com, all rights reserved
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import axios from "axios";

  export default {
    name: "search",
    data() {
      return {
        input: '',
        flag: false,
        movieFields: []
      }
    },
    methods: {
      goProduct: function (mid) {
        this.$router.push("/product/" + mid);
      }
    },
    mounted: function () {
      let keyword = this.$route.params.keyword;
      var _this = this;
      axios.get("/bean/search/" + keyword)
        .then(function (response) {
          _this.movieFields = response.data;
        })
    }
  }
</script>

<style scoped>
  .link_1 {
    height: 30px;
    background-color: #545652;
  }

  .l_link {
    line-height: 30px;
    font-size: 14px;
    margin: 0 15px;
    float: left;
    color: whitesmoke;
  }

  .m_link {
    line-height: 30px;
    font-size: 14px;
    margin: 0 15px;
    float: left;
    color: blue;
  }

  .header_1 {
    height: 140px;
    background-color: azure;
    /*border: 1px solid darkgreen;*/
    margin-bottom: 15px;
  }

  .header_2 {
    height: 90px;
    font-weight: bold;
    font-size: 36px;
    color: skyblue;
    line-height: 90px;
    /*border: 1px solid darkblue;*/
  }

  .movie_link {
    /*border: 1px solid darkgoldenrod;*/
    height: 50px;
    line-height: 50px;
    margin-left: 20px;
  }

  .footer {
    height: 60px;
    line-height: 60px;
    /*border: 1px solid skyblue;*/
    background-color: #545652;
    color: whitesmoke;
    font-size: 14px;
  }

  .content {
    padding: 0px 0px 10px 0px;
  }

  .search_result {
    float: left;
    font-weight: bold;
    font-size: 30px;
    margin-bottom: 30px;
    margin-left: 30px;
  }

  .product_box {
    height: 260px;
    /*border: 1px solid darkgoldenrod;*/
    margin-bottom: 20px;
  }

  .product_content {
    height: 260px;
    /*border-right: 1px solid silver;*/
    float: left;
  }

  .content {
    width: 300px;
    font-size: 14px;
    text-align: left;
  }

  a {
    text-decoration: none;
    color: #37a;
  }

  .content_box {
    height: 260px;
    /*border: 1px solid skyblue;*/
  }

  .content_title {
    height: 50px;
    line-height: 50px;
    /*border: 1px solid skyblue;*/
    text-align: left;
    font-size: 22px;
    color: green;
    margin-top: 10px;
  }

  .content_content {
    height: 210px;
    color: black;
    text-align: left;
    margin-top: 10px;
    /*首行缩进*/
    text-indent: 3em;
    /*字体间距*/
    letter-spacing: 5px;
    line-height: 22px;
    width: 450px;
    margin-left: 20px;
  }
</style>
